<template>
  <div class="login-main" >
    <!-- 注册主题 -->
    <div style="background-color: white;width: 700px;height: 700px;display: flex;justify-content: center">
      <div class="input-main">
        <div class="login-title">非遗文化体验馆在线预约系统注册</div>
        <div>
          <el-form ref="form" :model="form"  :rules="rules" label-width="90px">
            <el-row :gutter="20"> <!-- 设置列之间的间隔 -->
              <el-col :span="12">
                <el-form-item label="账号" prop="userAccount">
                  <el-input v-model="form.userAccount" placeholder="请输入账号"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码" prop="userPassword">
                  <el-input v-model="form.userPassword" placeholder="请输入密码" type="userPassword"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户名" prop="userNickname">
                  <el-input v-model="form.userNickname" placeholder="请输入用户名"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="头像" prop="userPic">
                  <imageUpload v-model="form.userPic"/>
                </el-form-item>
              </el-col>


              <el-col :span="12">
                <el-form-item label="手机号" prop="userPhone">
                  <el-input v-model="form.userPhone" placeholder="请输入手机号""/>
                </el-form-item>
              </el-col>




            </el-row>
          </el-form>

        </div>
        <div>
          <div class="label">验证码</div>
          <div>
            <el-row>
              <el-col :span="12">
                <el-input
                    v-model="loginInfo.verificationCode"
                    placeholder="请输入验证码"
                    clearable
                ></el-input>
              </el-col>
              <el-col :span="5">
                <VerifyCode />
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="display: flex;justify-content: center">
          <div>
            <div style="width: 100%">
              <el-button type="primary" style="width: 250px" @click="register">
                注册
              </el-button>
            </div>
            <div style="width: 100%">
              <el-button  style="width: 250px;margin-top: 10px;margin-left:0px" @click="tologin">
                登录
              </el-button>
            </div>

          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import VerifyCode from '../../components/VerificationCode'
import {register} from "@/api/project/user";

export default {
  components: {
    VerifyCode,
  },
  data() {

    var iseamil = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的邮箱"));
        } else {
          callback();
        }
      }
    };
    var isidcard = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的身份证"));
        } else {
          callback();
        }
      }
    };
    var isphone = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg =  /^1[34578]\d{9}$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    };
    var isage = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg =  /^((1[0-5])|[1-9])?\d$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的年龄"));
        } else {
          callback();
        }
      }
    };
    return {
      form:{},
      loginInfo: {
        verificationCode: '',
      },
      rules:{

        userAccount: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userPassword: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userPic: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userNickname: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userAge: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: isage, trigger: "blur" }
        ],
        userSex: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userIdcard: [
          {required: true, message: "不能为空", trigger: "blur"}
          ,
          { validator: isidcard, trigger: "blur" }
        ],
        userEmail: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: iseamil, trigger: "blur" }
        ],
        userLove: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userPhone: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: isphone, trigger: "blur" }
        ],
        userSkilled: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userSingle: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userAddr: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    tologin(){
      this.$router.push('/login')
    },

    register() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.loginInfo.verificationCode) {
            this.msgerror('请输入验证码')
            return
          }

          if (this.loginInfo.verificationCode !==localStorage.getItem("identifyCode")) {
            this.msgerror('验证码错误')
            return
          }



          register(this.form).then(res => {
            if(res.data=="该账号已经注册过"){
              this.msgerror(res.data);
            }else {
              this.msgsuccess("注册成功");
              this.$router.push('/login')
            }
          })

        }
      });


    },
  },
}
</script>

<style scoped lang="less">
.login-main {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/loginbg2.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .input-main {

    margin-top: 50px;
    opacity: 0.8;
    width: 500px;
    height: 600px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
}
.login-title {
  color: #409eff;
  font-size: 25px;
  font-weight: 700;
  display: flex;
  justify-content: center;
}
.label {
  margin-bottom: 10px;
}
</style>
